<template>
  <view>
    <nav-bar page-title="添加商家"/>

    <u-form
        :model="storeInfo"
        labelPosition="left"
        ref="uForm"
        :rules="rules"
    >
      <view class="card padding-40 margin-30 flex-column">
        <view class="text-36 margin-bottom-40">填写店铺和人员信息</view>

        <u-form-item
            required
            label="店铺名称"
            prop="name"
            borderBottom
            :labelWidth="80"
        >
          <u-input border="none" placeholder="请输入店铺名称" v-model="storeInfo.name"/>
        </u-form-item>

        <!-- 地址-->
        <u-form-item
            required
            label="店铺地址"
            :labelWidth="80"
            prop="address"
        >
          <u-textarea v-model="storeInfo.address" placeholder="请输入店铺地址" autoHeight border="bottom"/>
        </u-form-item>

        <view class="flex-between">
          <view class="column">
            <u-form-item
                required
                label="店铺经度"
                :labelWidth="80"
                prop="longitude"
            >
              <u-input
                  v-model="storeInfo.longitude" placeholder="点击icon" border="none" disabled disabledColor="#fff"
              />
            </u-form-item>
            <u-form-item
                required
                label="店铺纬度"
                :labelWidth="80"
                prop="longitude"
            >
              <u-input
                  v-model="storeInfo.latitude" placeholder="点击icon" border="none" disabled disabledColor="#fff"
              />
            </u-form-item>
          </view>
          <view class="padding-20 bg-white" @click="getStoreAddress">
            <u-icon
                name="map-fill" size="22" :color="storeInfo.longitude && storeInfo.latitude ? '#1073FF' : '#999999'"
            />
          </view>
        </view>

        <!--  人员名-->
        <u-form-item
            required
            label="人员名称"
            :labelWidth="80"
            prop="person_name"
        >
          <u-input v-model="storeInfo.person_name" placeholder="请输入店铺人员真实姓名" border="none"/>
        </u-form-item>

        <u-form-item
            required
            label="手机号"
            :labelWidth="80"
            prop="phone"
        >
          <u-input
              v-model="storeInfo.phone" placeholder="请输入店铺人员手机号"
              type="number" :maxlength="11" border="none"
          />
        </u-form-item>
        <u-form-item
            required
            label="人员UID"
            :labelWidth="80"
            prop="uid"
        >
          <u-input v-model="storeInfo.uid" placeholder="请输入店铺人员UID" type="number" :maxlength="11" border="none"/>
        </u-form-item>
        <u-form-item
            required
            label="代理利润"
            :labelWidth="80"
            prop="agent_profit"
        >
          <u-number-box
              v-model="storeInfo.agent_profit" :min="1" :max="100 - parseInt(userInfo.agent.company_fee_rate)"
              integer/>
        </u-form-item>
      </view>

      <view class="card padding-40 margin-30 flex-column">
        <view class="text-36">上传店铺资料照片</view>

        <u-form-item
            required
            label="店铺照片"
            prop="logo"
            :labelWidth="120"
        >
          <u-upload
              :width="150" :height="150" accept="image" :maxCount="1" :fileList="storeImage" multiple
              @afterRead="(file) => uploadImage(file, 0)" @delete="(file)=>deleteImage(file, 0)"
          />
        </u-form-item>

        <!-- 营业执照-->
        <u-form-item
            required
            label="店铺营业执照"
            prop="business_license"
            :labelWidth="120"
        >
          <u-upload
              :width="150" :height="150" accept="image" :maxCount="1" :fileList="businessLicenseImage" multiple
              @afterRead="(file)=>uploadImage(file,1)" @delete="(file)=>deleteImage(file, 1)"
          />
        </u-form-item>

        <!-- 身份证前面-->
        <u-form-item
            required
            label="店铺人员身份证前面"
            prop="id_front"
            :labelWidth="120"
        >
          <u-upload
              :width="150" :height="150" accept="image" :maxCount="1" :fileList="idFrontImage" multiple
              @afterRead="(file) => uploadImage(file, 2)" @delete="(file)=>deleteImage(file, 2)"
          />
        </u-form-item>

        <!-- 身份证后面-->
        <u-form-item
            required
            label="店铺人员身份证后面"
            prop="id_after"
            :labelWidth="120"
        >
          <u-upload
              :width="150" :height="150" accept="image" :maxCount="1" :fileList="idAfterImage" multiple
              @afterRead="(file) => uploadImage(file, 3)" @delete="(file)=>deleteImage(file, 3)"
          />
        </u-form-item>
      </view>
    </u-form>

    <view class="margin-30">
      <u-button type="primary" size="large" shape="circle" @click="storeInfoSubmit" text="提交"/>
    </view>
    <view style="height: 100rpx;"/>
  </view>
</template>

<script>
import NavBar from "@/components/nav-bar/nav-bar.vue";
import appConfig from "@/config/config";
import tips from "@/utils/tips";
import {mapActions, mapState} from "vuex";
import {addStore} from "@/services/Agents/store";

export default {
  name: "AddStore",
  components: {NavBar},
  data() {
    return {
      storeImage: [],
      businessLicenseImage: [],
      idFrontImage: [],
      idAfterImage: [],
      storeInfo: {
        logo: '',
        name: '',
        address: '',
        business_license: '',
        id_front: '',
        id_after: '',
        person_name: '',
        phone: '',
        uid: null,
        agent_profit: 5,
        longitude: null,
        latitude: null
      },

      rules: {
        'logo': {
          type: 'string', required: true, message: '请上传店铺照片',
        }, 'name': {
          type: 'string', required: true, message: '请填写店铺名',
        }, 'uid': {
          type: 'number', required: true, message: '请填写店铺人员UID',
        }, 'agent_profit': {
          type: 'number', min: 1, max: 3, required: true, message: '请填写代理人利润',
        }, 'address': {
          type: 'string', max: 256, required: true, message: '请填写地址',
        }, 'longitude': {
          type: 'number', required: true, message: '请点击icon获取店铺当前经度',
        }, 'latitude': {
          type: 'number', required: true, message: '请点击icon获取店铺当前维度',
        }, 'business_license': {
          type: 'string', required: true, message: '请上传营业执照',
        }, 'id_front': {
          type: 'string', required: true, message: '请上传身份证正面',
        }, 'id_after': {
          type: 'string', required: true, message: '请上传身份证后面',
        }, 'person_name': {
          type: 'string', min: 3, max: 64, required: true, message: '请输入您的真是姓名',
        }, 'phone': {
          type: 'string', pattern: /^[1][3-9][0-9]{9}$/,
          transform(value) {
            return String(value);
          },
          min: 7, max: 11, required: true, message: '请输入电话号码',
        },
      },
    };
  },

  mounted() {
    this.$nextTick(() => {
      this.$refs.uForm.setRules(this.rules);
    });
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    ...mapActions(['account']),
    // 获取当前位置
    getStoreAddress() {
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          console.log("=-=-==--=-= getStoreAddress", res)
          const {longitude, latitude} = res
          this.storeInfo.longitude = longitude
          this.storeInfo.latitude = latitude
          tips.toast('获取当前位置成功')
        }, fail(err) {
          console.log('getLocation', err)
        }
      });
    },
    // 上传和删除店铺照片
    uploadImage(fileData, index) {
      console.log(fileData)
      const {file} = fileData

      console.log(file)
      uni.uploadFile({
        url: appConfig.api + 'upload/file/store',
        filePath: file[0].url,
        file: file[0],
        fileType: 'image',
        formData: {is_black_white: "false"},
        name: 'file',
        success: (result) => {
          const res = JSON.parse(result.data)
          const {url, file_path} = res.data
          const fileList = [{url}]
          if (index === 0) {
            this.storeImage = fileList
            this.storeInfo.logo = file_path
          } else if (index === 1) {
            this.businessLicenseImage = fileList
            this.storeInfo.business_license = file_path
          } else if (index === 2) {
            this.idFrontImage = fileList
            this.storeInfo.id_front = file_path
          } else if (index === 3) {
            this.idAfterImage = fileList
            this.storeInfo.id_after = file_path
          }
        }, fail(err) {
          console.log(err)
        }
      });
    },
    deleteImage(file, index) {
      if (index === 0) {
        this.storeImage = []
      } else if (index === 1) {
        this.businessLicenseImage = []
      } else if (index === 2) {
        this.idFrontImage = []
      } else if (index === 3) {
        this.idAfterImage = []
      }
    },

    // 提交
    storeInfoSubmit(e) {
      this.$refs.uForm.validate().then(async validationResult => {
        if (!validationResult) {
          uni.$u.toast('缺少参数');
          return;
        }
        let data = this.storeInfo;
        data.id_image = [data.id_after, data.id_front];
        console.log(data);
        // return
        const response = await addStore(data)
        uni.navigateBack()
        tips.toast(response.msg);
      })
    }

  },
}
</script>

<style lang="scss">

</style>
